<template>
  <div class="music-info">
    <!-- {{ currentLineNum }}
    {{ playingLyric }} -->
    <div class="normal-player">
      <div class="background">
        <img :src="songInfo.picUrl" alt="" />
      </div>
    </div>
    <div class="music-header">
      <div class="songName">{{ songInfo.name }}</div>
      <div class="songer">{{ songInfo.artist }}</div>
    </div>
    <scroll class="lyric" ref="lyricList" :data="currentLyric && currentLyric.lines">
      <div class="lyric-wrapper">
        <div v-if="currentLyric">
          <p ref="lyricLine" class="lyricLine text" :class="{ current: currentLineNum === index }" v-for="(line, index) in currentLyric.lines" :key="index">
            {{ line.txt }}
          </p>
        </div>
      </div>
      <div class="msg" v-show="!currentLyric || !currentLyric.lrc">暂无歌词哟~</div>
    </scroll>
    <div class="prograss" ref="progressBar">
      <div class="current-time">{{ currentTime }}</div>
      <div class="duration">{{ duration }}</div>
      <div class="inner-prograss"></div>
      <div class="percent" ref="percent"></div>
    </div>
  </div>
</template>

<script>
import { computed, reactive, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
import Lyric from 'lyric-parser'
export default {
  setup() {
    const store = useStore()
    const defaultImg = require('../../../../assets/images/黑胶.png')
    let playingLyric = computed(() => {
      return store.getters.playingLyric
    })

    // watch(currentLineNum,(n,o)=>{
    //     if (n > 1) {
    //     let lineEl = this.$refs.lyricLine[n - 1]
    //     this.$refs.lyricList.scrollToElement(lineEl, 1000)
    //   } else {
    //     this.$refs.lyricList.scrollTo(0, 0, 1000)
    //   }
    // })
    return {
      playingLyric,
      defaultImg
    }
  },
  methods: {
    fromatTime(val) {
      let m = 0,
        s = 0
      m = Math.floor(val / 60)
      s = Math.floor(val % 60)
      if (s < 10 && m < 10) {
        return `0${m}:0${s}`
      }
      if (s < 10 && m > 10) {
        return `${m}:0${s}`
      }
      if (s >= 10 && m < 10) {
        return `0${m}:${s}`
      }
      return `${m}:${s}`
    }
  },
  computed: {
    currentTime() {
      return this.fromatTime(this.$store.getters.currentTime)
    },
    duration() {
      return this.fromatTime(this.$store.getters.duration)
    },
    songInfo() {
      return this.$store.getters.songInfo
    },
    currentLyric() {
      return this.$store.getters.currentLyric
    },
    currentLineNum() {
      return this.$store.getters.currentLineNum
    },
    percent() {
      return this.$store.getters.percent + '%'
    }
  },
  watch: {
    percent(v) {
      this.$refs.percent.style.width = this.percent
    },
    currentLineNum: {
      handler(n, o) {
        this.$nextTick(() => {
          let lyricListDom = document.getElementsByClassName('lyricLine')
          console.log(n, lyricListDom[n])
          if (n > 5) {
            if (lyricListDom) {
              let lineEl = lyricListDom[n - 5]
              this.$refs.lyricList.scrollToElement(lineEl, 1000)
            }
          } else {
            this.$refs.lyricList.scrollTo(0, 0, 1000)
          }
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.music-info {
  position: relative;
  .music-header {
    padding: 20px 10px 10px 10px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    .songName {
      margin-bottom: 5px;
    }
  }
  .normal-player {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: #222;
    .background {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.6;
      filter: blur(20px);
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .lyric {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 80%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0);
  }
  .lyric .lyric-wrapper {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
  }
  .lyric .lyric-wrapper .text {
    line-height: 32px;
    color: hsla(0, 0%, 100%, 0.5);
    font-size: 14px;
  }
  .lyric .lyric-wrapper .current {
    color: #fff;
  }
  .msg {
    color: #fff;
    margin-top: 100px;
    font-size: 13px;
  }
  .prograss {
    position: relative;
    width: 66%;
    margin: 20px auto;
    height: 0.015rem;
    padding: 0.1rem 0;
    z-index: 10;
  }
  .prograss .current-time,
  .prograss .duration {
    position: absolute;
    top: -0.08rem;
    width: 0.5rem;
    height: 0.2rem;
    line-height: 0.2rem;
    font-size: 12px;
    color: #fff;
  }
  .prograss .current-time {
    left: -2.45rem;
  }
  .prograss .duration {
    right: -1.1rem;
  }
  .inner-prograss {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #888;
    height: 0.015rem;
  }
  .percent {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0.015rem;
    background: #d33a31;
    z-index: 10;
  }
  .percent::after {
    content: '';
    position: absolute;
    display: block;
    right: -7.5px;
    top: -7.5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.3s ease;
  }
}
</style>